<!-- 自定义模板页 -->
<template>
	<view class="">
		<view class="container">
			<!-- <view class="roll-box">
				<image :src="`${$BASE_URL_YIYUAN}/roll-icon.png`" mode="aspectFit"></image>
				<swiper class="swiper" autoplay="true" interval="2000" circular="true" vertical="true">
					<swiper-item v-for="(item,index) in info.notice" :key="index">
						<view class="swiper-item">{{item}}</view>
					</swiper-item>
				</swiper>

			</view> -->
			<!-- <view class="tip-box">
				<text class="tip-left">已有<text class="tip-yellow">{{info.number}}</text>玩家参与抽奖</text>
				<text class="tip-right">当前抽奖玩家人数<text class="tip-yellow">{{info.today_number}}</text></text>
			</view> -->
			<view class="draw-box">
				<mycard id="mycard" :card="card" @open="openCard"></mycard>
			</view>
			<view class="tip2-box">
				当前免费抽奖次数{{prizeNum}}次
			</view>
			<view class="button-box">
				<button type="default" @click="openDraw">立即抽奖</button>
			</view>
			<!-- <view class="prize-box">
				<view class="prize-title">
					<view class="image-wrapper">
						<image :src="`${$BASE_URL_YIYUAN}/prize-title.png`" mode="aspectFit"></image>
					</view>
				</view>
				<view class="prize-list">
					<view class="prize-item" v-for="(item,index) in info.today_prize" :key="item.id">
						<view class="image-wrapper">
							<image :src="item.image" mode="aspectFit"></image>
						</view>
						<view class="prize-name">
							{{item.title}}
						</view>
						<view class="prize-prize">
							￥{{item.price}}
						</view>
					</view>

				</view>
			</view> -->
			<!-- <view class="prize-box every-box">
				<view class="prize-title">
					<view class="image-wrapper">
						<image :src="`${$BASE_URL_YIYUAN}/every.png`" mode="aspectFit"></image>
					</view>
				</view>
				<view class="every-content">
					<text class="mr">{{info.everyday_prize.date}}</text>
					<text class="mr">{{info.everyday_prize.user}}</text>
					<text class="mr red-txt">{{info.everyday_prize.prize}}</text>
					<text>{{info.everyday_prize.num}}</text>
				</view>
				<view class="every-tip">
					{{info.prize_msg}}
				</view>
			</view> -->
			<!-- <view class="rule-box">
				<view class="rule-title">
					活动规则
				</view>
				<view class="rule-txt">
					<view class="rule-txt-item" v-for="(item,index) in info.prize_rule" :key="index">
						{{item}}
					</view>
				</view>
			</view> -->
		</view>
		
		<view class="popup-bg" v-if="showPop" @click.self="closePop">
			<!-- 中奖啦 -->
			<view class="popup-box" v-show="prizeInfo.title != '谢谢参与'">
				<view class="popup-title">
					中奖啦!
				</view>
				<view class="popup-tip">
						恭喜你获得<text>{{prizeInfo.title}}</text><br>
				</view>
				<view class="popup-img">
					<image :src="prizeInfo.prize.image" mode="aspectFit"></image>
				</view>
				<view class="popup-button">
					<button type="default" @click="receiveAward">立即领取</button>
				</view>
				<view class="popup-close" @click="closePop">
					<view class="close-img">
						<image src="/static/images/shop/guanbi.png"></image>
					</view>
				</view>
			</view>
			<!-- 谢谢参与begin -->
			<view class="popup-box" v-show="prizeInfo.title == '谢谢参与'">
				<view class="popup-title" style="padding-top: 40upx;">
					谢谢参与
				</view>
				<view class="popup-img">
					<image :src="`${$BASE_URL_YIYUAN}/thank.png`" mode="aspectFit"></image>
				</view>
				<view class="popup-button">
					<button type="default" @click="again">再来一次</button>
				</view>
				<view class="popup-close" @click="closePop">
					<view class="close-img">
						<image src="/static/images/shop/guanbi.png"></image>
					</view>
				</view>
			</view>
			<!-- end -->
		</view>
	</view>
</template>

<script>
	import mycard from '@/components/hxr-card/hxr-card.vue';
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	export default {
		components: {
			mycard
		},
		data() {
			return {
				info: {},
				prizeNum: 0, // 抽奖抽数
				showPop: false,
				prizeInfo: {}, //奖品
				card: [],
				$BASE_URL_YIYUAN: this.$BASE_URL_YIYUAN,
				isCardLock: true, //不是重复点击
				token: ""
			};
		},
		onLoad(option) {
			for (let i = 0; i < 9; i++) {
				this.card.push({
					img: '',
					status: 0
				});
			}
		},
		onShow() {
			this.getPrizeNum();
		},
		methods: {
			// 立即抽奖
			openDraw() {
				let num = parseInt(Math.random() * 9)
				this.openCard({
					detail: {
						item: this.card[num],
						index: num
					}
				})
			},
			getPrizeNum() {
				// 获取抽奖次数
				this.$api.post({
					url: '/user/getUserPrizeNumber',
					success: res => {
						this.prizeNum = res;
					}
				})
			},
			// 子组件触发，点击打开单个卡片奖品
			openCard(e) {
				let self = this;
				if (!this.isCardLock) {
					return
				}
				this.isCardLock = false;

				const {
					item,
					index
				} = e.detail; // 动画没有结束，或已经点开
				if (item.status == 1) {
					return;
				};

				if (this.prizeNum > 0 || 1 == 1) {
					//获取奖品
					this.$api.post({
						url: '/prize/cacl',
						success(res){
							self.prizeInfo = res;
							let obj = res;
							obj.status = 1;
							self.card[index] = obj;
							// 等翻牌动画结束后再出现弹窗
							setTimeout(() => {
								self.showPop = true;
								self.isCardLock = true;
							}, 1000);
						}
					})
					
				}
			},
			closePop() {
				this.showPop = false;
				this.getPrizeNum();
				this.cardInit();
			},
			cardInit() {
				this.card = this.card.map((item) => {
					if (item.status == 1) {
						item.status = 0;
					}
					return item;
				});
			},
			again(url) {
				if (this.prizeNum > 0) {
					this.closePop();
				} else {
					this.jump("/pages/index/pay");
				}
			},
			receiveAward() {
				if (this.prizeInfo.is_send == 1) {
					// 去领取
					this.jump("/pages/index-receive", {
						order_id: this.prizeInfo.order.id
					});
				} else if (this.prizeInfo.is_send == 0) {
					//不需要领取实物
					uni.showToast({
						title: "已发放到我的奖励",
						icon: "none"
					})
				}
			},
			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			}

		}
	};
</script>

<style lang="scss">
	page {
		position: relative;
	}

	.no-scroll {
		overflow: hidden;
		position: fixed;
		height: 100vh;
	}

	.container {
		width: 100%;
		min-height: 100vh;
		color: #FFFFFF;
		background-image: url($BASE_URL_YIYUAN+'/ad.png');
		background-color: #BB0A08;
		background-repeat: no-repeat;
		background-size: contain;
		padding: 440upx 40upx 80upx;
	}

	.roll-box {
		padding: 0 50upx 0;
		font-size: 24upx;
		height: 50upx;
		border: 4upx solid #f00;
		border-radius: 40upx;
		overflow: hidden;
		display: flex;
		align-items: center;
		background-color: #BB0A08;

		image {
			width: 30upx;
			height: 30upx;
			margin-right: 20upx;
		}
	}

	.tip-box {
		padding: 40upx 0 20upx;
		font-size: 26upx;
		text-align: center;

		.tip-left {
			padding-right: 20upx;
			border-right: 1upx solid rgba(255, 255, 255, 0.5);
		}

		.tip-right {
			padding-left: 20upx;
		}

		.tip-yellow {
			color: #FCB800;
		}
	}

	.draw-box {
		width: 100%;
		height: 669upx;
		background-image: url($BASE_URL_YIYUAN+'/draw.png');
		background-color: #BB0A08;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
	}

	.sol-button {
		margin: 0 auto;
	}

	.tip2-box {
		color: #FFFFFF;
		padding: 20upx 40upx;
		font-size: 24upx;
	}

	.button-box {
		button {
			border-radius: 60upx;
			background-image: linear-gradient(#FF743B, #FFC949);
			color: #FFFFFF;
			text-shadow: -4upx -4upx 0 rgba(255, 0, 0, 0.5);
		}
	}

	.tip3-box {
		font-size: 22upx;
		color: #FFFFFF;
		text-align: center;
		margin: 20upx auto 40upx;
	}

	.prize-box {
		background-color: #FFFFFF;
		border-radius: 40upx;
		box-shadow: 0 46upx 0 #A70000;
		margin-bottom: 100upx;

		.prize-title {
			padding-top: 40upx;

			.image-wrapper {
				width: 220upx;
				margin: 0 auto 40upx;
				height: 40upx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.every-box {
		.prize-title {
			.image-wrapper {
				width: 330upx;
			}
		}

		.every-content {
			font-size: 30upx;
			color: #333333;
			text-align: center;

			.mr {
				margin-right: 20upx;
			}

			.red-txt {
				color: #BB0A08;
			}
		}

		.every-tip {
			color: #666666;
			font-size: 24upx;
			text-align: center;
			padding: 40upx 0 30upx;
		}
	}

	.prize-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.prize-item {
			width: 25%;
			padding: 0 20upx 20upx;

			.image-wrapper {
				width: 80%;
				height: 120upx;
				margin: 0 auto 20upx;

				image {
					width: 100%;
					height: 100%;
					opacity: 1;
				}
			}

			.prize-name {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			.prize-name,
			.prize-prize {
				font-size: 24upx;
				color: #333333;
				text-align: center;
			}
		}
	}

	.rule-box {
		.rule-title {
			font-size: 30upx;
			text-align: center;
			position: relative;

			&::before {
				width: 196upx;
				height: 3upx;
				position: absolute;
				content: "";
				background-image: url($BASE_URL_YIYUAN+'/rule.png');
				left: 50%;
				top: 50%;
				transform: translate(-280upx, 0);
			}

			&::after {
				width: 196upx;
				height: 3upx;
				position: absolute;
				content: "";
				background-image: url($BASE_URL_YIYUAN+'/rule.png');
				left: 50%;
				top: 50%;
				transform: rotateY(180deg) translate(-85upx, 0);
			}
		}

		.rule-txt {
			margin-top: 40upx;
			font-size: 28upx;
			line-height: 50upx;
		}
	}

	.popup-bg {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		top: 0;
		left: 0;
		z-index: 99999999;

		.popup-close {
			position: absolute;
			bottom: -100upx;
			left: 50%;
			transform: translate(-50%, -50%);

			.close-img {
				width: 50upx;
				height: 50upx;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}

		.popup-box {
			position: absolute;
			width: 556upx;
			height: 520upx;
			background-image: url($BASE_URL_YIYUAN+'/popbg.png');
			background-size: cover;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: #671509;
			padding-top: 40upx;



			.popup-title {
				font-size: 50upx;
				text-align: center;
			}

			.popup-tip {
				font-size: 28upx;
				text-align: center;
				margin-top: 20upx;
				position: relative;
				width: 100%;

				&::before {
					width: 106upx;
					height: 9upx;
					position: absolute;
					content: "";
					background-image: url($BASE_URL_YIYUAN+'/poptitlebg.png');
					background-size: 106upx 9upx;
					left: 50%;
					top: 50%;
					transform: translate(-230upx, -5upx);
				}

				&::after {
					width: 106upx;
					height: 9upx;
					position: absolute;
					content: "";
					background-image: url($BASE_URL_YIYUAN+'/poptitlebg.png');
					background-size: 106upx 9upx;
					left: 50%;
					top: 50%;
					transform: rotateY(180deg) translate(-120upx, 0);
				}
			}

			.popup-img {
				width: 150upx;
				height: 100upx;
				margin: 12upx auto 0;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.popup-button {
				position: absolute;
				bottom: 50upx;
				width: 100%;
				padding: 0 50upx;

				button {
					border-radius: 60upx;
					background-image: linear-gradient(45deg, #FEEF2E, #FFAF09);
					color: #671509;
				}
			}

		}
	}

	.roll-wrap {
		height: 50upx;
		overflow: hidden;
		padding: 0 20upx;

		.roll-item {
			height: 50upx;
			line-height: 50upx;
			font-size: 24upx;
		}
	}

	.swiper {
		width: 100%;
		height: 50upx;

		.swiper-item {
			height: 100%;
			display: flex;
			align-items: center;
		}
	}
</style>
